<template>
  <div class="statistics">
    <div class="head">
      <a href="javascript:;" @click="goBack" style="font-size:14px">
        <i class="el-icon-arrow-left"></i>返回
      </a>
    </div>
    <div class="topInfo">
      <div>
        班级名称 : {{ query.className }}
        <span></span>
      </div>
      <div>
        课程名称 : {{ query.courseName }}
        <span></span>
      </div>
      <div>
        试卷名称 : {{ query.examPaperName }}
        <span></span>
      </div>
      <div>
        考试时间 : {{ query.createTime }}
        <span></span>
      </div>
    </div>
    <h4>1.成绩概况</h4>
    <div class="total">
      <div class="chartTotal" style="width:560px;height:288px;margin-right:20px" ref="chartTotal"></div>
      <div class="tableTotal" style="width:560px;height:288px">
        <el-table
          :data="tableData"
          style="width:100%;height:100%"
          height="100%"
          row-class-name="body-font"
          header-row-class-name="header-bg"
        >
          <el-table-column prop="name" label="分数" align="center"></el-table-column>
          <el-table-column prop="value" label="人数" align="center"></el-table-column>
          <el-table-column prop="account" label="占比" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
    <h4>2.各题得分情况</h4>
    <div class="everyQue">
      <div style=";height:432px;margin-bottom:20px" ref="chartEvery"></div>
      <div class="everyTable">
        <div>
          <el-table
            :data="tableOne"
            width="50%"
            row-class-name="body-font"
            header-row-class-name="header-bg"
          >
            <el-table-column prop="itemOrder" label="题号" align="center"></el-table-column>
            <el-table-column prop="perOfDoRight" label="得分率" align="center"></el-table-column>
          </el-table>
        </div>
        <div>
          <el-table
            :data="tableTwo"
            width="50%"
            row-class-name="body-font"
            header-row-class-name="header-bg"
          >
            <el-table-column prop="itemOrder" label="题号" align="center"></el-table-column>
            <el-table-column prop="perOfDoRight" label="得分率" align="center"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { distributionSysList, situationSysList } from "@/api/system";
export default {
  nmae: "statistics",
  data() {
    return {
      query: {},
      tableData: [],
      myChart: null,
      everyChart: null,
      tableOne: [],
      tableTwo: [],
      isMessage: false
    };
  },
  methods: {
    goBack() {
      this.$router.goBack();
    },
    initTotalChart(data) {
      let datas = data || [
        { value: 0, name: "90分以上" },
        { value: 0, name: "80-90分" },
        { value: 0, name: "70-80分" },
        { value: 0, name: "60-70分" },
        { value: 0, name: "60分以下" }
      ];
      let arr = [];
      datas.map(item => {
        if (item.value != 0) {
          arr.push(item);
        }
      });
      if (!data) {
        arr = datas;
      }

      let option = {
        color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#e1979b"],
        // title: {
        //   text: "某站点用户访问来源",
        //   subtext: "纯属虚构",
        //   left: "center"
        // },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },

        legend: {
          orient: "vertical",
          left: "left",
          data: ["90分以上", "80-90分", "70-80分", "60-70分", "60分以下"]
        },
        series: [
          {
            type: "pie",
            radius: "55%",
            // center: ["50%", "60%"],
            data: arr,
            label: {
              formatter: "{b| {b}：{c} 人}",
              rich: {
                b: {
                  color: "#101010"
                }
              }
            }
          }
        ]
      };
      if (!data) {
        this.myChart = this.$echarts.init(this.$refs.chartTotal);
      }
      this.myChart.setOption(option);
    },
    initEveryChart(arr, sourse, nosourse) {
      let xAxis = arr || ["1", "2", "3", "4", "5", "6", "7"];
      let dataOne = sourse || [0, 0, 0, 0, 0, 0, 0];
      let dataTwo = nosourse || [0, 0, 0, 0, 0, 0, 0];
      let option = {
        color: ["#2ec7c9", "#b6a2de"],
        legend: {
          data: ["答对人数", "未答对人数"]
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        yAxis: {
          type: "value"
        },
        xAxis: {
          type: "category",
          data: xAxis
        },
        series: [
          {
            name: "答对人数",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight"
            },
            data: dataOne,
            barWidth: 30
          },
          {
            name: "未答对人数",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight"
            },
            data: dataTwo,
            barWidth: 30
          }
        ]
      };
      if (!arr) {
        this.everyChart = this.$echarts.init(this.$refs.chartEvery);
      }
      this.everyChart.setOption(option);
    }
  },
  mounted() {
    this.initTotalChart();
    this.initEveryChart();
    let query = this.$route.query;
    this.query = query;
    distributionSysList({
      classId: query.classId,
      examPaperId: query.examPaperId
    }).then(res => {
      if (res.code == 1) {
        let data = [];
        data.push({
          value: res.response.aboveNinety,
          name: "90分以上",
          account: res.response.perAboveNinety
        });
        data.push({
          value: res.response.aboveEightyBelowNinety,
          name: "80-90分",
          account: res.response.perAboveEightyBelowNinety
        });
        data.push({
          value: res.response.aboveSeventyBelowEighty,
          name: "70-80分",
          account: res.response.perAboveSeventyBelowEighty
        });
        data.push({
          value: res.response.aboveSixtyBelowSeventy,
          name: "60-70分",
          account: res.response.perAboveSixtyBelowSeventy
        });
        data.push({
          value: res.response.belowSixty,
          name: "60分以下",
          account: res.response.perBelowSixty
        });
        this.tableData = data;
        this.initTotalChart(data);
      } else if (res.code == 2) {
        if (!this.isMessage) {
          this.$message.warning({
            message: res.message
          });
        }
        this.isMessage = true;
      }
    });
    situationSysList({
      classId: query.classId,
      examPaperId: query.examPaperId
    }).then(res => {
      if (res.code == 1) {
        this.tableOne = res.response.slice(
          0,
          Math.floor(res.response.length / 2)
        );
        this.tableTwo = res.response.slice(Math.floor(res.response.length / 2));
        let arr = [];
        let sourse = [];
        let nosourse = [];
        res.response.map(item => {
          arr.push(item.itemOrder);
          sourse.push(item.doRightCount);
          nosourse.push(item.doFalseCount);
        });
        this.initEveryChart(arr, sourse, nosourse);
      } else if (res.code == 2) {
        if (!this.isMessage) {
          this.$message.warning({
            message: res.message
          });
        }
        this.isMessage = true;
      }
    });
  }
};
</script>
<style lang="scss" scoped>
.statistics {
  width: 1200px;
  padding: 20px 30px;
  background: #fff;
  margin: 17px auto;
  > h4 {
    font-size: 14px;
    font-weight: 700;
    margin: 15px 0;
  }
  .head {
    line-height: 20px;
    font-size: 16px;
    margin-bottom: 10px;
    color: #007cdc;
  }
  .topInfo {
    line-height: 42px;
    background: #dee6ec;
    font-size: 0;
    padding: 0 5%;
    > div {
      display: inline-block;
      width: 25%;
      font-size: 14px;
      vertical-align: middle;
    }
  }
  .total {
    display: flex;
  }
  .everyTable {
    display: flex;
    > div {
      flex: 1;
    }
  }
}
</style>
